<template>
  <div>
    <el-menu
      :default-active="$route.path"
      mode="horizontal"
      @select="handleSelect"
      router
    >
      <el-menu-item index="/home">{{ $t("Header.home") }}</el-menu-item>
      <el-menu-item
        :index="'/blogType/' + item.Id"
        v-for="item in blogtypeslist"
        :key="item.Id"
        >{{ item.TypeName }}</el-menu-item
      >
      <el-menu-item index="/blog/write">{{ $t("Header.write") }}</el-menu-item>
      <el-menu-item index="/blog/bsm">{{
        $t("Header.backStageManagement")
      }}</el-menu-item>
      <el-menu-item>
        <el-dropdown @command="changeLanguage">
          <span class="el-dropdown-link">
            {{ $t("Header.languageSwitch")
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="zh">中文</el-dropdown-item>
              <el-dropdown-item command="en">English</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-menu-item>
      <el-submenu style="float: right">
        <template #title>
          {{ this.user.userEmail }}
          <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          ></el-avatar>
        </template>
        <el-menu-item index="/login">{{
          $t("Header.login")
        }}</el-menu-item>
        <el-menu-item @click="logOut">{{ $t("Header.logOut") }}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
import { useI18n } from "vue3-i18n";

export default {
  setup() {
    // 使用i18n
    const i18n = useI18n();
    const changeLanguage = (lang) => {
      i18n.setLocale(lang);
    };
    return {
      changeLanguage,
    };
  },
  mounted() {
    this.$api.blog.getBlogTypeList().then((res) => {
      this.blogtypeslist = res.data;
      this.$store.dispatch("blog/setBlogTypeList", res.data); //存进vuex，避免再撰写文章的时候重复调用
    });
  },
  computed: {
    ...mapGetters(["user"]),
  },
  data() {
    return {
      activeIndex: "1",
      blogtypeslist: null,
    };
  },
  methods: {
    ...mapActions({
      setBlogTypeList: "blog/setBlogTypeList",
      setUserEmail: "user/setUserEmail",
    }),
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logOut() {
      window.sessionStorage.clear();
      this.setUserEmail("");
      this.$message.success("成功退出");
      this.$router.push({ name: "Home" });
    },
  },
};
</script>